<template>
  <div class="fenlei">
    <div class="fenleiheader"></div>
    <!-- 竖向排列 -->
    <div class="fenleiCen">
      <van-sidebar v-model="activeKey" class="left">
        <van-sidebar-item
          :title="item.name"
          v-for="item in menus"
          :key="item._id"
          @click="qiehuan(item.name)"
        />
      </van-sidebar>
      <ul class="right">
        <li
          v-for="item in list"
          :key="item._id"
          class="everyone"
          @click="xiangqing(item._id)"
        >
          <img :src="item.coverImg" alt="" />
          <div>
            <p>{{ item.name }}</p>
            <p style="color: red">￥{{ (item.price / 100).toFixed(2) }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // active: 0,
      activeKey: 0,
      menus: [],
      list: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取分类数据  页面展示
    async fenlei() {
      const result = await axios.get(
        "http://localhost:3009/api/v1/product_categories"
      );
      // console.log(result);
      this.menus = result.data.categories;
      console.log(this.menus);
      //获取详细数据内容  在页面显示
      const neirong = await axios.get(
        "http://localhost:3009/api/v1/products?name=" + this.menus[0].name
      );
      // console.log(neirong);
      this.list = neirong.data.products;
      console.log(this.list);
    },
    //点击切换不同的产品
    qiehuan(title) {
      axios
        .get("http://localhost:3009/api/v1/products?name=" + title)
        .then((res) => {
          console.log(res);
          this.list = res.data.products;
        });
    },
    //跳转详情
    xiangqing(id) {
      console.log(id);
      this.$router.push("/detail/" + id);
    },
  },
  created() {
    this.fenlei();
  },
  mounted() {},
  components: {},
};
</script>
<style>
.fenleiheader {
  /* background-image: ; */
  background: url(https://res.app.ikea.cn/static/public/catalog/fu001/banner.jpg?v=15);
  background-size: cover;
  width: 100%;
  height: 214px;
}
.fenlei {
  height: 500px;
}
.fenleiCen {
  width: 100%;
  height: calc(100% - 100px);
  padding: 20px 0 50px;
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  position: relative;
  top: -20px;
}
.right {
  height: 100%;
  overflow: auto;
  padding: 5px 10px;
}
.right img {
  width: 80px;
  height: 80px;
  display: block;
  margin-right: 10px;
}
.left {
  height: 100%;
  overflow: auto;
}
.right {
  flex: 1;
}
.right li {
  /* float: left; */
  font-size: 12px;
  color: #888888;
  display: flex;
  margin: 10px 0;
}
</style>
